function lan(title) {
	return this.$mapping.J_i18n(title, title, 'demo.custom')
}

//页面渲染配置相关 如表单组件
export default {
	main(tree) {
		const area1 = tree.initArea({
			title: '示列弹框',
			span: 24,
		})
		area1.addNode(
			area1.jsChildren({ is: 'div' }),
			area1.jsButton({
				//也可以使用innerHTML
				innerText: '表单弹框',
				click: () => {
					this.$jiess.nodeTan.open({
						title: '表单弹框',
						width: '40%',
						global: { size: 'small' },
						pageConfig: {
							form: {
								paramKey: 'demoTanForm'
							}
						}
					})
				},
			}),
			area1.jsButton({
				innerText: '分页弹框',
				click: () => {
					this.$jiess.nodeTan.open({
						title: '分页弹框',
						global: { size: 'small' },
						pageConfig: [{
							title: '分页一',
							name: 'pane1',
							form: {
								paramKey: 'demoTanPane1'
							}
						}, {
							title: '分页二',
							name: 'pane2',
							form: {
								paramKey: 'demoTanPane2'
							}
						}]
					})
				},
			}),
			area1.jsButton({
				innerText: '插槽使用',
				click: () => {
					const setTAG = (h, innerText) => h('span', {
						domProps: {
							innerText
						}
					})
					//开启弹框
					this.$jiess.nodeTan.open({
						title: '插槽使用',
						global: { size: 'small' },
						pageConfig: {
							form: {
								paramKey: 'demoTanForm'
							}
						},
						//配置cols，定义左右插槽位占据宽度
						cols: [4, 16, 4],
						rightTopParam: h => setTAG(h, 'rightTopParam'),
						topParam: h => setTAG(h, 'topParam'),
						headerParam: h => setTAG(h, 'headerParam'),
						footerParam: h => setTAG(h, 'footerParam'),
						leftParam: h => setTAG(h, 'leftParam'),
						rightParam: h => setTAG(h, 'rightParam')
					})
				},
			}),
			area1.jsButton({
				innerText: '多级弹框',
				click: () => {
					this.$jiess.nodeTan.open({
						title: `当前层级【1】`,
						//定义初始的层级标识
						levelNumber: 1,
						pageConfig: {
							form: {
								paramKey: 'demoTanApolar'
							}
						}
					})
				}
			})
		)
		const area2 = tree.initArea({
			title: '列表弹框',
			span: 24,
		})
		area2.addNode(
			area2.jsChildren({ is: 'div' }),
			area2.jsButton({
				innerText: '单页单表',
				click: () => {
					this.$jiess.nodeTan.open({
						title: '单页单表',
						width: '80%',
						global: { size: 'small' },
						pageConfig: {
							form: {
								paramKey: 'demoSearch',
								tableName: 'spsl'
							},
							table: {
								paramKey: 'spsl',
								httpInterface: this.$jiess.api.GetList1
							}
						}
					})
				},
			}),
			area2.jsButton({
				innerText: '多页单表',
				click: () => {
					this.$jiess.nodeTan.open({
						title: '多页单表',
						width: '80%',
						global: { size: 'small' },
						activeName: 'name1',
						pageConfig: [{
								title: '分页一',
								name: 'name1',
								form: {
									paramKey: 'demoSearch',
									name: 'mpsl1'
								},
								table: {
									paramKey: 'mpsl1',
									httpInterface: this.$jiess.api.GetList1
								}
							},
							{
								title: '分页二',
								name: 'name2',
								form: {
									paramKey: 'demoSearch',
									name: 'mpsl2'
								},
								table: {
									paramKey: 'mpsl2',
									httpInterface: this.$jiess.api.GetList2
								}
							}
						]
					})
				},
			})
		)

		const area3 = tree.initArea({
			title: '弹框回显',
			span: 24,
		})

		area3.addNode(
			area3.jsChildren({ is: 'div' }),
			area3.jsButton({
				innerText: '普通页面回显',
				click: () => {
					this.$jiess.nodeTan.open({
						title: '普通页面回显',
						global: { size: 'small' },
						pageConfig: {
							form: {
								paramKey: 'demoShowBase',
								initValues: {
									field1: lan.call(this, '这是普通回显的内容'),
									field2: 1
								}
							}
						}
					})
				}
			}),
			area3.jsButton({
				innerText: '函数回调回显',
				click: () => {
					this.$jiess.nodeTan.open({
						title: '函数回调回显',
						global: { size: 'small' },
						pageConfig: {
							form: {
								paramKey: 'demoShowBase',
								initValues: (cb) => {
									setTimeout(() => {
										cb({
											field1: lan.call(this,
												'这是函数回调回显的内容'),
											field2: 1
										})
									}, 2000)
								}
							}
						}
					})
				}
			}),
			area3.jsButton({
				innerText: '弹框异步回显',
				click: () => {
					this.$jiess.nodeTan.open({
						title: '弹框异步回显',
						global: { size: 'small' },
						pageConfig: {
							form: {
								paramKey: 'demoShowBase',
								initValues: new Promise(resolve => {
									setTimeout(() => {
										resolve({
											field1: lan.call(this,
												'这是弹框异步回显的内容'),
											field2: 1
										})
									}, 2000)
								})
							}
						}
					})
				}
			}),
			area3.jsButton({
				innerText: '分页页面回显',
				click: () => {
					this.$jiess.nodeTan.open({
						title: '分页页面回显',
						width: '80%',
						global: { size: 'small' },
						activeName: 'name1',
						pageConfig: [{
								title: '分页一',
								name: 'name1',
								form: {
									paramKey: 'demoShowPane1',
									initValues: {
										field1: lan.call(this, '数据对象回显'),
										field2: 1
									}
								}
							},
							{
								title: '分页二',
								name: 'name2',
								form: {
									paramKey: 'demoShowPane2',
									initValues: cb => {
										setTimeout(() => cb({
											field1: lan.call(this, '异步函数回调回显'),
										}), 2000)
									}
								}
							}
						]
					})
				}
			})
		)
	}
}
